<template>
	<view class="service-desk-panel">
		<view class="title">
			<text>{{title}}</text>
		</view>
		<view class="grid">
			<view class="grid-item" v-for="(item,index) in columns" :key="index" @click="onItem(item)">
				<view class="grid-item__image" :style="{
					color:item.iconColor,
						backgroundColor:item.iconBackgoundColor
				}">
					<fui-badge v-if="item.isDot" dot background="#D54941" absolute top="-5rpx"
						right="-5rpx"></fui-badge>

					<fui-icon :color="item.iconColor" custom-prefix="iconfont" :name="`icon-${item.icon}`"
						size="48"></fui-icon>
				</view>
				<fui-text style="margin-top:16rpx ;" size="24" :text="item.label"></fui-text>
			</view>
		</view>

	</view>


</template>


<script>
	import {
		mapState,
		mapGetters
	} from 'pinia'
	import {
		MainPages
	} from '../../../config/router-config';
	import {
		useAuthStore
	} from '../../../store/modules/auth'
	export default {

		props: {
			title: {
				type: String,
				default: '标题'
			},
			columns: {
				type: Array,
				default: () => []
			}
		},
		emits: ['clickItem'],
		data() {
			return {

			}
		},
		computed: {
			...mapGetters(useAuthStore, ['isLogin']),
		},
		methods: {
			onItem(item) {
				if (this.isLogin) {
					if (item?.router) {
						uni.navigateTo({
							url: item.router
						})
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '暂未登录,是否去登录',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: MainPages.LOGIN.router
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}

						}
					})

				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.service {
		&-desk {
			&-panel {
				background-color: #fff;
				border-radius: 16rpx;
				// padding: 0 16rpx;
				overflow: hidden;

				.title {
					padding: 24rpx 32rpx;
				}
			}
		}
	}

	.grid {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		&-item {
			width: 25%;
			padding: 32rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			&__image {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				background: #fff0ed;
				opacity: 1;
				position: relative;
			}
		}
	}
</style>